Deel 5/10 


Websiteproblemen (1/2) 


Je hebt eindelijk dat internetabonnement te pakken - breedband dan 
nog wel! Je kan nu niet alleen lekker vanuit je luie zetel surfen, je 
beschikt meteen ook over je hoogsteigen e-mailadres! En je provider 
gooide er warempel nog zo’n 10 MB webruimte bovenop … 


gen en dus promoveer je jezelf meteen tot webmaster. Alleen 

wil de constructie van je webstek niet altijd zo goed vlotten. 
Lees dan snel deze hersenbrekers door… Wil je een beeld van een 
site, dan is dit artikel — met z’n klachten en kwalen rond beeldma- 
teriaal — je op het lijf geschreven. In het volgende nummer pakken 
we andere hardnekkige webperikelen aan. 


Z onde natuurlijk om die virtuele bouwgrond braak te laten lig- 


Weight for me! 


Je hebt nog zo je best gedaan om die prachtige vakantiekiekjes in 
te scannen en ze een ereplaats op je webpagina's te gunnen, en wat 
blijkt dan: eenmaal on line, duurt het een eeuwigheid voor je alle 
foto’s op je pagina’s te zien krijgt, zeker als je ze met een analoge 
modem opvraagt! 


iew Photos 


Select a thumbnail to view the ad and full-size photo. 
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THERE'S MOREL >>>» | 


Al je foto's in een handig postzegelformaat. 
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Hersenbrekers 


Onze 


Hersenbrekers 
gelden in principe 
enkel voor de Windows- 
versies 95, 98, 98 SE en ME. 
De tips zijn dus niet nood- 
zakelijk altijd bruikbaar 
binnen een andere bestu- 
ringsomgeving (zoals 
NT, 2000 of XP). 


Stap 1 


Je kan alvast het aantal foto's dat op eenzelfde webpagina te zien 
is, verminderen. De rest van je kiekjes komt dan op andere pagi- 
na’s terecht. Met een knop VOLGENDE los je dus al veel problemen 
op. Een alternatief is een soort webalbum: je laat op één pagina je 
foto’s in postzegelformaat zien, en pas als je erop klikt, krijg je de 
pagina met de foto in vol ornaat. Een knop TERUG of OVERZICHT op 
die pagina is dan handig voor de surfer. Je kan die foto natuurlijk 
ook in een apart browservenster (met aangepaste grootte) laten ope- 
nen. 


Stap 2 


Blijft het inladen van foto’s een loodzware opgave voor je browser, 
dan zijn je beeldbestanden wellicht te zwaar. Ga bijvoorbeeld in je 
Verkenner even na hoeveel KB ze in beslag nemen. Een kleuren- 
foto op normaal formaat mag gewoonlijk niet meer dan zo’n 30 KB 
schijfruimte opeisen. Strenge regels schrijven zelfs voor dat een 
gemiddelde webpagina — met alle toeters en bellen — beter niet de 
so KB overschrijdt! 

Afslanken is dus de boodschap, maar hoe? Zijn er bepaalde stuk- 
ken van je foto die je kan weglaten, dan kan je die alvast met je 
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he Wee 5 IS IS Uitlijning: Standaard _@ Horizontale afstand: [0 
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en hoogte van de af- 
beelding in je web- 
editor aanpassen. De 
foto komt dan wel in 
een kleiner formaat 
op je webpagina te- 


recht, maar dat doet 
niets af aan de be- 


Snel even het formaat aanpassen? 
Niet op deze manier! 


standsgrootte. Je zal dus terug je beeldbewerkingsprogramma moe- 
ten aanspreken om de foto wat geschikter te maken. 


Stap 3 


Blijft de bestandsgrootte ook na deze 
operaties nog ontiegelijk groot, dan 
heb je de afbeelding hoogstwaar- 
schijnlijk met een te hoge resolutie 
ingescand! Vergeet niet dat de nor- 
male beeldschermresolutie in de 
buurt van de 72 dpi ligt (dots per 
inch). Het heeft dus geen enkele zin 
met een veel hogere resolutie in te 
scannen. Enkel als je de afbeelding 
op je webpagina groter wil krijgen, 
moet je de resolutie navenant aan- 
passen. Voor een verdubbeling kan 
je dan met pakweg 150 ppi inscan- 
nen. Bij scanners wordt die resolutie 
trouwens vaak in ppi — pixels per inch 
— uitgedrukt. 


Color (RGB) 


Hou het toch maar onder 
de 100 ppi! 


Stap 4 


Heb je met een aanvaardbare resolutie ingescand, dan moet je de 
afbeelding natuurlijk nog in een correct grafisch bestandsformaat 
gieten! Ook al is er intussen een derde kaper op de kust (png of vol- 
uit portable network graphics), dan hou je je toch het best bij de 
twee formaten die door zowat alle scanners probleemloos worden 
ondersteund: jp(e)g (joint photographic expert group) en gif (gra- 
phics interchange format). Gaat het om tekeningen met egale kleur- 
vlakken zoals logo’s of cartoons, dan gebruik je bij voorkeur het 
gif-formaat, met een palet van maximaal 256 kleuren. Voor foto’s 
is het jpg-formaat een stuk geschikter: dat kan namelijk miljoenen 
kleurschakeringen aan en het comprimeert het bestand tegelijk 
zonder al te veel kwaliteitsverlies. De meeste scan- en beeldbe- 


WE GAAN EERST COMPRIMEREN, 
NLVORENS WE DE FOTO MAKEN / 


Verschillende compressies: handig om kiezen! 


werkingsprogramma’s geven je zelfs de kans om de graad van com- 
pressie in te stellen: hoe hoger de compressie, hoe lager de kwali- 
teit. Wees niet bang een flinke compressiegraad te selecteren, zo’n 
70% bijvoorbeeld. De betere programma’s laten je de resultaten 
van verschillende compressie-instellingen netjes naast elkaar zien, 
inclusief vermelding van de bestandsgrootte. Let wel even op: blijkt 
achteraf dat je toch een andere compressie wil, vertrek dan altijd 
opnieuw van het originele beeld, want elke jpg-compressie gaat ge- 
paard met kwaliteitsverlies! 


Kruis erover 


Je hebt nu al je beeldmateriaal een afslankingskuur laten onder- 
gaan, en off line zien je foto’s er stuk voor stuk gelikt uit. De el- 
lende begint pas als je ze on line, op je eigen webruimte, wil be- 
wonderen. Je browser weigert ze name- 
lijk in te laden, en toont je weinig meer 
dan een leeg kader met een rood kruis- 
je 


‚… Stap 1 


Laten we eerst uitvissen wat er is mis- 
gelopen. Klik daarom met de rech- 
termuisknop op het kader waarin je 
normaal de afbeelding verwachtte. 
Uit het snelmenu kies je dan de op- 
tie EIGENSCHAPPEN. Die geeft je heel 
wat nuttige informatie: de naam van 
het bestand, de afmetingen en de 
padverwijzing. 


CLICKX MAGAZINE 7 - 29 JANUARI 2002 


Krijg je dat om een of 
andere reden toch niet 
El te zien, dan kan je nog 
altijd de html-bronco- 
de van die webpagina 
raadplegen. Daarvoor 
ga je in je browser op 
zoek naar het menu 
BeeLp, en klik je de op- 
tie BRON aan. Vermoe- 
delijk krijg je de code 
nu te zien in je Klad- 
blok. Spoor vervolgens 
— eventueel met be- 
hulp van het menu ZOEKEN — een regel op die het label rme (ima- 
ge) bevat. In diezelfde regel tref je ook het label src (source) aan. 
Dat geeft de padverwijzing naar je beeldbestand aan. Normaal zie 
je hier ook de labels wiprH en HEIGHT verschijnen, waarin de af- 
metingen van de afbeelding in pixels zijn vastgelegd. Als je web- 
editor die twee labels er standaard niet bij plaatst, dan is dat een 
bijzonder slecht teken. In dat geval kan je browser tijdens het bin- 
nenhalen van je pagina nog geen rekening houden met de effec- 
tieve afmetingen van je foto’s, en zal de lay-out rare sprongen ma- 
ken naarmate de foto’s zelf ook worden ingeladen. 


Een foto van mezelf (weliswaar in betere tijden.…) 


Hoezo betere tijden… ? 


Stap 2 


Wat kan je nu met deze informatie aanvangen? Ga voor alle zeker- 
heid eerst even de afmetingen van de foto na: er is een waterkans- 
je dat beide (breedte en hoogte) op o staan, maar je weet toch maar 
nooit. Controleer ook het bestandsformaat van de afbeelding: in 
principe moet de extensie steeds jp(e)g of gif zijn. Andere grafische 
formaten zijn zoals gezegd niet echt welkom bij de meeste brow- 
sers. Het spreekt natuurlijk vanzelf dat het louter hernoemen van 
een bestand — met de juiste extensie — weinig aarde aan de dijk 
brengt. Er zit dan weinig anders op dan opnieuw je beeldverwerker 
aan te spreken en je foto naar een correct formaat weg te schrijven. 


Stap 3 


Maar wedden dat het probleem in de padverwijzing ligt! Een hard- 
nekkige beginnersfout is dat het pad (op de on line webpagina) naar 


lol xf 


HTML weergeven of bewerken 


<html> 


<head> 

<meta http-equiv="Content-Type" 

content="text/html; charset=iso-8859-1"> 

<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> 
<title>Naamloos </title> 

</head> 


<body> 


<p><img src="../Progran Files/Clipart/Tantetruus. jpg" 
width="600" height="400"></p> 


C Origineel Huidig F7 Kleurcodes weergeven _ | Aerden 


De huidige HTML-code bekijken of bewerken 4 


Tante Truus staat nog op je harde schijf! 
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een map op je eigen, lokale harde schijf verwijst, zoals bijvoorbeeld: 
<IMG SRC="… /PROGRAM FILES/CLIPART/TANTETRUUS.JPG”>. Verwacht 
dus niet dat iemand die je webstek bezoekt toevallig ook die foto 
op die plaats op zijn harde schijf heeft gestockeerd! je zal dus ei- 
genhandig het pad moeten herstellen, zodat het netjes naar de map 
met afbeeldingen op de webserver verwijst. Stel dat het om de sub- 
Map BEELDEN gaat, net onder de map waarin de webpagina zelf zich 
bevindt, dan zou dat met de volgende coderegel kunnen: <IMG 
SRC=" BEELDEN /TANTETRUUS.JPG”>. Let goed op met hoofdletters en 
kleine letters: sommige webservers maken daar wel degelijk een 
onderscheid tussen: Tantetruus.jpg is dus niet hetzelfde als tante- 
truus.jpg. Ook in zo’n geval zet je browser er snel een (rood) kruis 
over! 

Bevindt de afbeelding zich ten slotte op een externe server, zorg er 
dan voor dat je in de padverwijzing ook HrrP:// opneemt. 
Bijvoorbeeld: 

<IMG SRC=" HTTP: //WWW.CLICKKMAGAZINE.BE/IMAG/LOGO_CLICKX.GIF">. 


Bij de kraag gevat 


Zolang je je braafjes 
aan rechthoekige af- 
beeldingen houdt, 
heb je er weinig last 
van. Maar zodra je 
wat grilliger vormen 
in je webpagina 
stopt, krijg je er snel 
mee af te rekenen: 
die vervelende 
rechthoekige kraag 
die zich rond je fi- 
guur nestelt en zo je 
webpagina ontsiert! 


Met en zonder kraag. 


Stap 1 


Niets zo geschikt als een gifje om je van dat kader te ontdoen. Dit 
grafische formaat stelt je namelijk in staat een bepaalde kleur aan 
te duiden die transparant kan worden gemaakt. Bovendien neemt 
het automatisch de kleur van de achtergrond aan waarop het plaat- 
je terechtkomt. Haast alle beeldbewerkingsprogramma’s bieden 
de mogelijkheid 
met transparante 
gifs te werken. 
Maar je kan ook 
gebruik maken 
van gratis on line 
diensten, zoals 
Mylmager [ wvvw. 
myimager.com | 
en GifWorks 
[ www.gifworks. 
com |. We nemen 
GifWorks als voor- 
beeld: 


À Transparify - Microsoft Internet Explorer 


Transparify 


Transparantie in GifWorks..… 


{) Microsoft FrontPage 


INormaal__W (standaardlettertype) \Normaal 


Pagina 


Mappen 


lit 


…… @n in MS Frontpage! 


- in het browservenster van GifWorks verschijnt een menu; hier 
klik je op Fire en kies je vervolgens de optie FILE OPEN; 

- je krijgt nu een nieuw venster te zien, waar je op de knop BLA- 
DEREN klikt; 

- eens je het gifje op je harde schijf hebt gelokaliseerd, druk je op 
de knop UPLOAD IMAGE; 

- je gifje verschijnt nu on line; ga naar het menu Epir en kies App 
‘TRANSPARENCY; 

- klik vervolgens op de kleur die je transparant wil maken (in ons 
voorbeeld: wit); 

- klik met de rechtermuistoets op de aangepaste figuur en kies uit 
het snelmenu AFBEELDING OPSLAAN ALS; 

- kies een geschikte plaats en naam en bevestig je keuze. 


Werk je met een recente versie van MS Frontpage, dan kan het nog 
eenvoudiger. Vanuit de werkbalk voor figuren (menu BEELD, WERK- 
BALKEN, FIGUREN) kan je het 
gereedschap selecteren om 
een transparante kleur in te 
stellen. Daarna is het enkel 
nog een kwestie van de juis- 
te kleur aan te stippen. 


Stap 2 


Maar wat als de kleur die je 
transparant wou maken, 
niet alleen in die kraag voor- 
komt. Kijk maar eens goed 
naar ons voorbeeld: blijkbaar 
was het gezicht van het man- 
netje ook wit, en heeft Gif- 
Works of MS Frontpage dat 
in één moeite door ook 
transparant gemaakt! Dat los 
je het eenvoudigst op door 
in je beeldbewerkingspro- 
gramma de kraag eerst een 
kleur mee te geven die ner- 
gens anders in de afbeelding 
voorkomt, en er daarna pas 
GifWorks op los te laten. 


Zó transparant hoeft nu ook weer niet! 


Eerst de kraag een ander verfje geven. 


Stap 3 

Wil je kost wat kost een grillig gevormd deel van een foto op je web- 
stek zetten, dan ligt het natuurlijk iets moeilijker! Jpg ondersteunt 
namelijk geen transparantie! Er zijn gelukkig een aantal uitvals- 
wegen. Zo kan je je afbeelding toch als gif opslaan, maar dan zit je 
wel met de beperking van 256 kleuren. Een alternatief is het png- 
formaat, dat talloze kleuren en bovendien een trapsgewijze trans- 
parantie toelaat. Nadeel is dan wel dat lang niet alle browsers dat 
formaat ondersteunen. 

Lijkt geen van beide oplossingen je ideaal te zijn, dan zit er weinig 
anders op dan toch maar bij het jpg-formaat te blijven, en de kraag 
dezelfde kleur mee te geven als de achtergrond van je webpagina 
die dan wel een egale kleur moet hebben. Die kleur kan je in de 
broncode van je webpagina opvragen, meer bepaald in de codere- 
gel met het label Bopy BGCOLOR. Daar vind je een hexadecimale 
kleurcode van 3 getallen (telkens van 2 cijfers). Die geven respec- 
tievelijk de kleur rood, groen en blauw aan. Aan deze gegevens heb 
je normaal gezien voldoende om dezelfde kleur in je beeldbewer- 
kingsprogramma op te roepen. 


Kleurkiezer 
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(Hexadecimaal) kleurtje kiezen in PhotoShop. 


voorbeeld zal je browser weergeven als Dit is vet. 


Pad: Een bepaalde weg die je moet volgen om aan gegevens 
te geraken. Een pad wordt vaak voorgesteld door een reeks 


van submappen. Voor het bestand C:\Mijn 


documenten\tekst\clickx\n\\workshop.doc is het path dus 


C:\Mijn documenten\tekst\clickx\nl. 
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HTML: Staat voor hypertext markup language, en is zowat de 
moedertaal van webpagina’s. Deze taal wordt opgebouwd 
met behulp van labels (tags). De code <b>Dit is vet</b> bij- 


Problemen op de achtergrond” 


Je had graag een leuke achtergrondfiguur op je webpagina geplaatst, 
maar je krijgt die maar niet te zien, of het duurt een eeuwigheid 
voor ze eindelijk opduikt. We laten je snel zien hoe je beide pro- 
blemen oplost. 


Stap 1 


Met de meeste WYSIWYG-webeditors kan je snel een klaarge- 
maakte achtergrondfiguur op je webpagina plaatsen. In MS Front- 
page bijvoorbeeld doe je dat als volgt: 

- klik met de rechtermuistoets op een lege plaats in je webpagina; 
- kies de optie EIGENSCHAPPEN VAN PAGINA uit het snelmenu; 

- open het tabblad ACHTERGROND; 

- bij de sectie OPMAAK plaats je een vinkje voor ACHTERGRONDFI- 
GUUR, en via de knop BLADEREN kan je vervolgens een geschikte fi- 
guur aanduiden (jpg of gif). 


Eigenschappen van pagina 


sd 


Een achtergrondfiguur: zo geklonken ín MS Frontpage. 


Stap 2 


Voor je je selectie met een druk op de knop OK bevestigt, doe je er 
goed aan ook een achtergrondkleur te selecteren. Dat lijkt mis- 
schien vreemd, maar stel even dat je achtergrondfiguur donker- 
bruin is en dat de tekst op je webpagina lichtgeel is. Zolang de ach- 
tergrondfiguur niet door de browser is ingeladen, krijgt je bezoe- 
ker dan een haast onleesbare tekst te zien. Daarom leg je dus be- 
ter ook een achtergrondkleur vast, die bij voorkeur zo dicht moge- 
lijk aanleunt bij de hoofdkleur uit je achtergrondfiguur. 

In hetzelfde dialoogvenster zie je ook WATERMERK staan. Als je die 
optie selecteert, blijft je achtergrondfiguur onbeweeglijk in het 
browservenster staan, ook al zou je bezoeker van zijn schuifbalken 
gebruik maken. 


Stap 3 


Vind je in je webeditor niet onmiddellijk een optie terug om een 
achtergrondfiguur in te voegen, dan kan het natuurlijk ook nog 
manueel. Je dient dan wel even in de broncode van je pagina te dui- 
ken. Spoor eerst de coderegel met het label Bopy op. Daarna kan je 
het volgende toevoegen: <BODY BGCOLOR="#800000” BACK- 
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: HTML weergeven of bewerken 


<html> 


<head> 

<meta http-equiv="Content-Type" 

content="text/html: charset=iso-8859-1"> 

<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> 
<title>Naamloos </title> 

</head> 


<p><img src=". ./Beelden%20Héanp:M/fuif/Img0l3 jpg” width="600" 
height="400"></p> 
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Duik even in de broncode van je pagina. 


GROUND="BEELDEN/ACHTERGROND.JPG” BGPROPERTIES="FIXED">. 

Even tekst en uitleg: 

- bgcolor geeft (in hexadecimaal formaat) de gewone achter- 
grondkleur weer; 

- background geeft het verwijspad naar je achtergrondfiguur weer; 

- bgproperties="fixed” dient om van je figuur een watermerk te 
maken, zodat het niet meescrollt met de pagina. 


Stap 4 


1gtond po @ 


Een achtergrondpatroon: in het kort en ín het breed… 


Nuttig om weten is dat je browser een achtergrondfiguur in feite 
als een patroontje beschouwt dat hij over de hele webpagina blijft 
herhalen, tot die pagina volledig gevuld is. Wil je bijvoorbeeld een 
achtergrond in twee kleuren, met links een smalle marge in één 
kleur, en het grote rechterdeel in een andere kleur, dan hoef je daar 
absoluut geen grote afbeelding voor klaar te stomen! Het volstaat 
dan in je beeldbewerker een figuur te creëren van bijvoorbeeld 1280 
pixels breed (zodat die ook schermvullend is op een scherm met 
extra hoge resolutie) op 20 pixels hoog. Als je alles goed hebt ge- 
daan, zorgt de browser automatisch voor een naadloos tegelpa- 
troon, en haalt hij je achtergrondfiguur in minder dan geen tijd 
van de server op. Onze achtergrondfiguur nam bijvoorbeeld slechts 
3,3 KB in beslag. 

— Toon Van Daele — 


VAKTAAL 


DOS: Staat voor Disk Operating System. De voorloper 
van Windows, die in tegenstelling tot Windows niet in 
een grafische, maar in een tekstuele omgeving werkt. 


Pixel: Staat voor picture element, en is het kleinste ele- 
ment dat kan worden gebruikt voor het opslaan van een 
figuur. 


WYSIWYG: Staat voor What You See Is What You Get. 
Het komt erop neer dat je in het programma (zoals een 
tekstverwerker of webeditor) al onmiddellijk merkt hoe 
het eindresultaat er zal uitzien. 


